<!DOCTYPE html>
<html>
<head>
	<title></title>
	<mate name="viewport"  content="width=device-width">	
</head>
<body>
	<div id="get" style="font-size: 2rem;">
		下载
	</div>
	<div>
		<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=02419f275edf8db1a8237436684ab631/728da9773912b31bee7053968618367adab4e175.jpg" id="png">
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function downloadIamge(selector, name) {
    var image = new Image()
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous')
    image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height

        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png')
        // 生成一个a元素
        var a = document.createElement('a')
        // 创建一个单击事件
        var event = new MouseEvent('click')

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || '下载图片名称'
        // 将生成的URL设置为a.href属性
        a.href = url
        // 触发a的单击事件
        a.dispatchEvent(event);
        alert("下载成功！")
    }

    image.src = document.querySelector(selector).src
}

// 调用方式
// 参数一： 选择器，代表img标签
// 参数二： 图片名称，可选
$("#get").on("click",function(){
	console.log("click")
	var png=document.getElementById("png");
	downloadIamge("#png", '图片名称')
})



</script>
</body>
</html>